<script setup lang="ts" name="WidgetPageComponent">
import DraggableComponentList from './draggableComponentList.vue'
import useAsideStyle from '../../hooks/useAsideStyle'
import useComponentTab from '../../hooks/useComponentTab'
import useDictionaryEntry from '@/hooks/useDictionaryEntry'
const { getDictionaryEntryData } = useDictionaryEntry()
const emit = defineEmits(['widgetAsideChange', 'widgetPageDragEnd'])
const { isWidgetAsideShow, isWidgetButtonHover, isPropertyAsideShow, onMouseenter, onMouseleave } = useAsideStyle()
const draggableComponentListRef = ref(null)
const { moduleType, activeCollapse, componentTab, handleComponentTypeChange, initWidgetSelectedType } = useComponentTab(draggableComponentListRef)
const props = defineProps({
  pageConfig: { type: Object }
})
const pageOptions = toRef(props, 'pageConfig')

const widgetList = ref([])
const getWidgetList = async () => {
  console.log('获取状态数据')
  widgetList.value = await getDictionaryEntryData({
    label: '',
    status: 2,
    type: 'moduleType'
  })
  widgetList.value = initWidgetSelectedType(widgetList.value)

  console.log(widgetList.value, '模块类型')
}
getWidgetList()
// 模块组件类型切换事件
const widgetTypeChangeHandler = (v) => {
  widgetList.value.forEach((item) => {
    if (item.children.length > 0) {
      item.children.forEach((element) => {
        element.isActive = false
        if (element.id === v.id) {
          element.isActive = true
          moduleType.value = element.value
          draggableComponentListRef.value.changeModuleTypeHandler(element.value)
        }
      })
    }
  })
}
// PC端装修模块组件/页面模板侧边栏显示隐藏点击事件
const widgetToggle = () => {
  isPropertyAsideShow.value = false
  isWidgetAsideShow.value = !isWidgetAsideShow.value
  emit('widgetAsideChange', {
    propertyAsideStatus: isPropertyAsideShow.value,
    widgetAsideStatus: isWidgetAsideShow.value
  })
}
const widgetAsideHidden = () => {
  isWidgetAsideShow.value = false
}
const widgetAsideShow = () => {
  isWidgetAsideShow.value = true
}
// 子组件将方法暴露给父组件
defineExpose({ widgetAsideHidden, widgetAsideShow, getWidgetList })

const widgetPageDragEnd = (v) => {
  console.log(v, '父组件')
  emit('widgetPageDragEnd', v)
}
</script>

<template>
  <el-aside :class="['widget-aside', 'aside-wrap', isWidgetButtonHover ? 'is-hover' : '']">
    <div class="aside-button" v-if="pageOptions.device === 'pc'" @click="widgetToggle" @mouseenter.prevent="onMouseenter('widget')" @mouseleave.prevent="onMouseleave('widget')" title="页面装修"><svg-icon :icon="isWidgetAsideShow ? 'bi:chevron-bar-left' : 'bi:chevron-bar-right'"></svg-icon></div>
    <el-header>
      <div :class="['config-tab', componentTab === 'widgetComponent' ? 'is-active' : '']" @click="handleComponentTypeChange('widgetComponent')">模块组件</div>
      <div :class="['config-tab', componentTab === 'pageComponent' ? 'is-active' : '']" @click="handleComponentTypeChange('pageComponent')">页面模板</div>
    </el-header>
    <el-main>
      <div class="widget-component" v-if="componentTab === 'widgetComponent'">
        <div class="widget-type">
          <el-scrollbar>
            <el-collapse class="page-designer-collapse" v-model="activeCollapse">
              <el-collapse-item v-for="(item, index) in widgetList" :key="index" :name="item.value">
                <template #title>
                  <h2 class="collapse-title">{{ item.label }}</h2>
                </template>
                <ul class="widget-type-list">
                  <li v-for="(element, idx) in item.children" :key="idx" @click="widgetTypeChangeHandler(element)">
                    <div :class="['item-widget', element.isActive ? 'is-active' : '']">
                      <svg-icon :icon="element.icon"></svg-icon>
                      <span>{{ element.label }}</span>
                    </div>
                  </li>
                </ul>
              </el-collapse-item>
            </el-collapse>
          </el-scrollbar>
        </div>
        <DraggableComponentList ref="draggableComponentListRef" :componentTab="componentTab" :pageConfig="pageOptions" @dragEnd="widgetPageDragEnd"></DraggableComponentList>
      </div>
      <div class="page-component" v-else>
        <DraggableComponentList ref="draggableComponentListRef" :componentTab="componentTab" :pageConfig="pageOptions" @dragEnd="widgetPageDragEnd"></DraggableComponentList>
      </div>
    </el-main>
  </el-aside>
</template>

<style scoped lang="scss">
.widget-type-list {
  padding: 0 10px 10px;
  overflow: hidden;

  li {
    float: left;
    width: 100%;
    padding: 2px;

    .item-widget {
      display: flex;
      align-items: center;
      height: 28px;
      background-color: var(--el-fill-color-light);
      cursor: pointer;

      &:hover,
      &.is-active {
        color: var(--el-color-white);
        background-color: var(--el-color-primary);
      }

      .el-icon {
        margin: 0 5px 0 8px;
      }
    }
  }
}
</style>
